<template>
  <div class="mask">
    <div class="wrap_spinner">
      <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
      </div>
    </div>
  </div>

</template>
<script>
  import {mapState, mapMutations} from 'vuex'
  import store from '../vuex/store_index'
  export default {
    name: 'bottom_btn',
    data () {
      return {
        object: this.$store.getters.Get_Bot_C_obj,
        sign_c: true
      }
    },
    computed: mapState([
      'BottomBtn'
    ]),
    methods: {
      ...mapMutations([
        'Loading_show',
        'M_BottomClick_2'
      ]),
      cc (sign) {
        this.$store.commit('M_BottomClick',sign)
      }
    },
    mounted(){
      this.$store.getters.Get_Bot_C_obj
    }
  }
</script>
<style>
  .mask{
    width: 100%;
    height:100%;
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    z-index: 100;
  }
  .wrap_spinner{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
  }
  .spinner {
    width: 60px;
    height: 60px;

    position: relative;
    margin: 100px auto;
  }

  .double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #67CF22;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: bounce 2.0s infinite ease-in-out;
    animation: bounce 2.0s infinite ease-in-out;
  }

  .double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
  }

  @-webkit-keyframes bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
  }

  @keyframes bounce {
    0%, 100% {
      transform: scale(0.0);
      -webkit-transform: scale(0.0);
    } 50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
  }
</style>
